<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #f8f9fc;
        }

        * {
            margin: 0;
            padding: 0;
        }

        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        dl,
        dt,
        dd,
        ol,
        ul,
        li {
            margin: 0px;
            padding: 0px;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        img {
            display: block;
        }

        input {
            border: none;
            outline: none;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .clearFixed:after {
            content: "";
            display: block;
            clear: both;
        }

        .btnRed:after {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            bottom: -2px;
            margin-left: -10px;
            border: 10px solid transparent;
            border-bottom-color: #fff;
        }

        .btnWhit:before {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            bottom: 0px;
            margin-left: -10px;
            border: 10px solid transparent;
            border-bottom-color: #00b38a;
        }

        .header {
            height: 360px;
            background: #00b38a;
        }

        .boxCon {
            position: absolute;
            top: 77px;
            left: 50%;
            margin-left: -325px;
            width: 700px;
            height: 490px;

        }

        .boxCon .logo {
            height: 77px;
            background: url("./img2/logo1.jpg")no-repeat;
        }

        .boxCon .forBox {
            height: 400px;
            border: 1px solid #dce1e6;
            padding: 6px;
            background: #fff;
        }

        .boxCon .forBox .imgBox img {
            margin-right: 6px;
        }

        .boxCon .forBox .imgBox img:nth-child(2) {
            margin-top: -5px;
        }

        .boxCon .forBox .inpLeft {
            position: relative;
            width: 290px;
            height: 277px;
            padding: 0px 63px;
            border-right: 1px dashed #555;
        }

        .boxCon .forBox .inpLeft .or {
            position: absolute;
            width: 18px;
            height: 18px;
            right: -8px;
            top: 50%;
            margin-top: -9px;
            background: #fff;
            text-align: center;
            color: #555;
        }

        .boxCon .forBox .inpLeft .line1 {
            height: 40px;
            border-bottom: 1px solid #555;
            font-size: 18px;
            color: #555;
            line-height: 40px;
        }

        .boxCon .forBox .inpLeft .line1 p {
            width: 145px;
            text-align: center;
            position: relative;
        }

        .boxCon .forBox .inpLeft .line1 p:nth-child(1) {
            color: #00B38A;
            border-bottom: 1px solid #00b38a;
        }

        .boxCon .forBox .inpLeft .lineInp {
            height: 64px;
            border-bottom: 1px solid #555;
        }

        .boxCon .forBox .inpLeft .lineInp input {
            width: 200px;
            height: 44px;
            padding-top: 20px;
            outline: none;
        }

        .boxCon .forBox .inpLeft .txt {
            color: #00B38A;
            height: 58px;
            line-height: 58px;
            font-size: 12px;
            text-align: right;
        }

        .btn {
            height: 48px;
            width: 100%;
            background: #00B38A;
            /* color: #fff; */
            text-align: center;
            line-height: 48px;
            font-size: 18px;
        }

        .boxCon .forBox .inpRight {
            padding-left: 52px;
            color: #555;
            font-size: 14px;
            padding-top: 80px;
        }

        .boxCon .forBox .inpRight .txt2 {
            font-size: 16px;
            color: #00b38a;
            margin-bottom: 44px;
            height: 30px;
            line-height: 30px;
        }

        .boxCon .forBox .inpRight .txt2 img {
            display: inline-block;
            margin-left: 3px;
            vertical-align: middle;
        }

        .boxCon .forBox .inpRight .txt3 img {
            margin-right: 24px;
            margin-top: 10px;
        }

        .verifyCode {
            display: inline-block;
            width: 50px;
            height: 20px;
            border: 1px solid black;
        }

        .boxCon .forBox .inpLeft .lineInp .sendText {
            width: 110px;
            height: 44px;
            padding-top: 20px;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="boxCon">
        <div class="logo"></div>
        <!-- 禁止form表单提交 -->
        <form action="#" method="get" onsubmit="return false">
            <div class="forBox">
                <div class="imgBox clearFixed">
                    <!-- <img class="fl" src="img2/qrcode-normal.svg" alt="" /> -->
                    <!-- <img class="fl" src="img2/wx-login.svg" alt="" /> -->
                </div>
                <div class="inpLeft fl">
                    <div class="line1">
                        <p class="txtP1 fl btnRed btnWhit">注册</p>
                        <!-- <p class="txtP2 fl">验证码登录</p> -->
                    </div>
                    <div class="lineInp">
                        <input type="text" placeholder="请输入常用手机号" />
                        <span></span>
                    </div>
                    <div class="lineInp">
                        <input type="password" placeholder="密码长度不得小于六位" class="pwd1" /><span></span>
                    </div>
                    <div class="lineInp">
                        <input type="password" placeholder="请再次输入密码" class="pwd2" /><span></span>
                    </div>
                    <div class="lineInp">
                        <input type="text" placeholder="请输入验证码" class="sendText" />
                        <span class="verifyCode"></span><button class="send" disabled>发送验证码</button>
                    </div>
                    <button class="btn" disabled>注册</button>
                    <span></span>
                </div>
                <div class="inpRight fl">
                    <div class="txt1">已有账号</div>
                    <div class="txt2"><a href="login.html">立即登录<img src="img2/icon-arrow-right.png" alt="" /></a></div>
                </div>
            </div>
        </form>
    </div>
</body>

</html>
<script src="./js/common.js"></script>
<script>

    let mobile = document.querySelector('input[type=text]');
    let pwd1 = document.querySelector('.pwd1');
    let pwd2 = document.querySelector('.pwd2');
    let sendText = document.querySelector('.sendText');
    let sendDom = document.querySelector('.send');
    let btnDom = document.querySelector('.btn');
    let flag1 = flag2 = flag3 = flag4 = flag5 = false;
    mobile.onblur = function () {
        // console.log(mobile.value);    
        //手机号是否符合要求    
        if (/^1[356789]\d{9}$/.test(mobile.value)) {
            this.nextElementSibling.innerHTML = `<span style = "color:green">√</span>`;
            sendDom.disabled = false
            flag1 = true;
        } else {
            this.nextElementSibling.innerHTML = `<span style = "color:red;font-size:12px;">格式有误</span>`;
            flag1 = false;
            sendDom.disabled = true
        }
        changeRe()
    }
    //密码是否符合要求
    //密码框1
    pwd1.onblur = () => {
        if (pwd1.value.length >= 6) {
            pwd1.nextElementSibling.innerHTML = `<span style = "color:green">√</span>`;
            flag2 = true
        } else {
            pwd1.nextElementSibling.innerHTML = `<span style = "color:red;font-size:12px;">格式有误</span>`;
            flag2 = false
        }
        changeRe()
    }

    //密码框2
    pwd2.onblur = () => {
        if (pwd2.value.length >= 6) {
            pwd2.nextElementSibling.innerHTML = `<span style = "color:green">√</span>`;
            flag3 = true
        } else {
            pwd2.nextElementSibling.innerHTML = `<span style = "color:red ;font-size:12px;">格式有误</span>`;
            flag3 = false
        }
        changeRe()
        // 两个密码框密码需一致且不能为空
        if ((pwd1.value == pwd2.value) && (pwd1.value != "" && pwd2.value != "")) {
            pwd2.nextElementSibling.innerHTML = `<span style = "color:green">√</span>`;
            flag5 = true
        } else {
            pwd2.nextElementSibling.innerHTML = `<span style = "color:red ;font-size:12px;">两次密码不一致</span>`;
            flag5 = false
        }
        changeRe()
    }



    //判断输入的值是否符合要求
    function changeRe() {
        var btn = document.querySelector('.btn');
        (flag1 && flag2 && flag3 && flag4 && flag5) ? (btn.disabled = false) : (btn.disabled = true);
    }

    //短信验证码倒计时初始值
    let time = 30;
    // let time1 = 3;  //跳转倒计时
    //保存定时器标识
    let timer;  //验证码定时器
    // let timer1;  //跳转页面定时器
    //点击发送验证码
    sendDom.onclick = () => {

        // 发送ajax请求
        ajax({
            url: 'http://39.98.112.34:8000/base/user/sendVerify',
            type: 'post',

            data: { mobile: mobile.value, scenic: "1" },
            success: function (response) {
                let resData = response.data;

                timer = setInterval(() => {
                    time--;
                    if (time > 0) {
                        sendDom.disabled = true;
                        sendDom.parentElement.lastElementChild.innerHTML = `${time}s后重新获取`;
                        document.querySelector('.verifyCode').innerHTML = resData.verifyCode;
                    } else {
                        sendDom.disabled = false;
                        sendDom.parentElement.lastElementChild.innerHTML = `重新获取`;
                        time = 30;
                        clearInterval(timer);
                    }
                }, 1000);

                //验证码框
                sendText.onblur = () => {
                    if (sendText.value == resData.verifyCode) {
                        flag4 = true;
                    } else {
                        sendText.setAttribute('placeholder', '验证码不得为空!!!');
                        flag4 = false;
                    }
                    changeRe()
                }
            }
        })
    }

    //注册
    btnDom.onclick = () => {
        // 发送ajax请求
        ajax({
            url: 'http://39.98.112.34:8000/base/user/register',
            type: 'post',
            data: { verifyCode: sendText.value, mobile: mobile.value, password: pwd1.value },
            success: function (response) {
                console.log(response.code)
                btnDom.disabled = true;    //禁用注册按钮
                // timer1 = setInterval(() => {
                //     time1--;
                //     if (time1 < 0) {
                //         // btnDom.innerHTML = `${time1}s后将自动跳转到登录页面`;
                //         // location.href = 'login.html';
                //         clearInterval(timer1)
                //     }
                // }, 1000);
                if (response.code != 200) {
                    btnDom.nextElementSibling.innerHTML = `<span style = "color:red;font-size:12px;">手机号不能重复</span>`;
                } else {
                    btnDom.nextElementSibling.innerHTML = `<span style = "color:green;font-size:12px;">注册成功，请登录</span>`;
                }

            }
        })
    }


</script>